<%--suppress BadExpressionStatementJS --%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<jsp:include page="head.jsp"/>
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css">
<style>
    body {
        margin-bottom: 60px;
        background: #fff;
    }

    .person_top {
        position: relative;
        width: 100%;
    }

    .top_in {
        z-index: 2;
        display: block;
        margin: 0 auto;
        width: 95%;
    }

    .top_box {
        position: relative;
        width: 100%;
    }

    .content {
        width: 95%;
        background: url("<%=path%>/images/top_in_new.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 20px 9px;
        margin: 0 auto;
    }

    .top img.left {
        border-radius: 100%;
        width: 66px;
        height: 66px;
        vertical-align: middle;
        display: inline-block;
        margin-right: 8px;
    }

    .content .top {
        padding: 8px 30px;
    }

    .content .top .right {
        display: inline-block;
        vertical-align: middle;
    }

    .content .top .right div {
        color: #666666;
        font-size: 16px;
    }

    .name {
        margin-bottom: 8px;
    }

    .my_put {
        background: url("<%=path%>/images/top_right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .my_in {
        background: url("<%=path%>/images/top_left.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .bottom {
        position: relative;
        text-align: center;
        line-height: 34px;
        padding-top: 8px;
        margin-top: 18px;
        font-size: 16px;
        color: #666;
    }

    .bottom div {
        float: left;
        width: 53%;
        z-index: 3;
        position: absolute;
        height: 60px;
        text-align: center;
        line-height: 60px;
    }

    .my_in {
        right: -6px;
    }

    .my_put {
        left: -6px;
    }

    .bottom div.active {
        color: #fff;
        background: url("<%=path%>/images/top_act.png");
        background-size: 104% 107%;
    }

    .clearfix:before {
        content: '';
        display: block;
        clear: both;
    }

    .mui-card {
        box-shadow: none;
    }

    .mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after {
        content: '\e581';
        color: #0080ff;
        font-size: 20px;
    }

    .mui-table-view-cell > a:not(.mui-btn) {
        background: #fff;
    }

    .mui-table-view-cell.mui-collapse .mui-collapse-content {
        padding: 8px 0px;
    }

    .content {
        margin-bottom: 70px;
    }

</style>
<jsp:include page="public.jsp"/>
</head>
<body>
<div class="person_top">
    <div class="content">
        <div class="top">
            <img src="" class="left userPhoto" alt="">
            <div class="right">
                <div class="name"></div>
                <div class="number"></div>
                <div class="openId" style="display: none;"></div>
            </div>
        </div>
        <div class="bottom">
            <div class="my_put active" style="background-position: -4px 0;">我的发布</div>
            <div class="my_in" style="background-position: -9px 0;">我的招领</div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="my_put_box mui-content">
    <div class="mui-card">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" id="put_found_btn" href="javascript:;">招领信息</a>
                <div class="mui-collapse-content">

                    <ul class="put_found">
                    </ul>
                </div>
            </li>
            <li class="put_lost_btn mui-table-view-cell mui-collapse ">
                <a class="mui-navigate-right " href="javascript:;">遗失信息</a>
                <div class="mui-collapse-content">
                    <ul class="put_lost">
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<div style="display: none;" class="my_in_box">
    <ul>
    </ul>
</div>
<div class="tabs">
    <div class="tab">
        <span class="mui-icon mui-icon-compose"></span>
        <div class="tabText">发布信息</div>
    </div>
    <div class="tab ">
        <span class="mui-icon mui-icon-home "></span>
        <div class="tabText ">首页</div>
    </div>
    <div class="tab tabActive">
        <span class="mui-icon mui-icon-person index_tab"></span>
        <div class="tabText tabtext_out">个人中心</div>
    </div>
</div>
<div class="displayimg"></div>
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/mui.min.js"></script>
<script src="<%=path%>/layui/layui.all.js"></script>
<script>
    $(function () {
        /*tab标签*/
        var $tab = $('.tab');
        var $tabText = $('.tabText');
        $tab.click(function () {
            var index = $(this).index();
            $(this).addClass("tabActive").siblings().removeClass("tabActive");
            $(this).children("span").addClass("index_tab").parent().siblings().children("span").removeClass("index_tab");
            $(this).children($tabText).addClass("textActive tabtext_out").parent().siblings().children($tabText).removeClass("textActive tabtext_out");
            if (index == 0) {
                window.location.href = "<%=path%>/add"
            } else if (index == 1) {
                window.location.href = "<%=path%>/index"
            } else {
                window.location.href = "<%=path%>/person"
            }
        });
    });
</script>
<script>

    $(function () {
        var $myputbox = $('.my_put_box'),
            $myinbox = $('.my_in_box'),
            $myinboxUl = $('.my_in_box ul');

        var layer = layui.layer,
            carousel = layui.carousel,
            util = layui.util;
        var $personBtn = $('.content .bottom div');
        var h = 0;
        var width = $(window).width() * 0.92;
        var height = $(window).height() * 0.9;

        var $name = $('.right .name'),
            $number = $('.right .number'),
            $openId = $('.right .openId'),
            $userPhoto = $('.userPhoto'),
            $put_found = $('.put_found'),
            $put_lost = $('.put_lost'),
            $displayImg = $('.displayimg'),
            $put_found_btn = $('#put_found_btn'),
            $put_lost_btn = $('.put_lost_btn'),
            typeArray = new Array("失物信息", "招领信息"),
            thingArray = new Array("证件", "书本", "财务", "数码", "其他");
        /*
        * 获取个人信息
        * */
        $.ajax({
            type: "post",
            url: "<%=path%>/user/findDetail",
            async: true,
            dataType: "json",
            success: function (data) {
                if (data.result === "success") {
                    layer.closeAll('loading');
                    $name.text(data.data.username);
                    $number.text(data.data.mobile);
                    $openId.text(data.data.openid);
                    $userPhoto.attr("src", data.data.photoUrl);
                }
            }
        });

        listPage(0);

        /*
        * bar
        * */
        util.fixbar({
            bar1: "&#xe61a;"
            , bar2: true
            , css: {right: 12, bottom: 80}
            , showHeiht: 100
            , click: function (type) {
                if (type === 'bar1') {
                    h += $(document).height() - $(window).height();
                    $("html,body").finish().animate({
                        "scrollTop": h + 'px'
                    }, 800);
                } else if (type === 'bar2') {
                    layer.msg('你需要帮助吗？')
                } else if (type === "top") {
                    h = 0;
                }
            }
        });

        /*
        * 动态效果
        * */
        $personBtn.click(function () {
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            if (index === 0) {
                $myputbox.show();
                $myinbox.hide();
            } else if (index === 1) {
                listPage(1);
                $myinbox.show();
                $myputbox.hide();
            }
        });

        /*
        *  当前列表
        * */
        function listPage(status) {
            layer.load(2);
            $.ajax({
                type: "post",
                url: "<%=path%>/message/findList",
                async: true,
                dataType: "json",
                data: {
                    "type": 0,
                    "thing": 0,
                    "self": 1,
                    "status": status,
                    "start": 0,
                    "size": 100
                },
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.result === "faild") {
                        if (data.cause === "no login error") {
                            layer.msg('请先登录智慧校园云平台', {icon: 5, time: 800});
                            setTimeout(function () {
                                XuntongJSBridge.call('close');
                            }, 900);
                        } else {
                            window.location.href = "<%=path%>/error";
                        }

                    } else {
                        if (status === 0) {
                            if (types === 2) {
                                $put_found.html("");
                            } else if (types === 1) {
                                $put_lost.html("");
                            }
                        }
                        else if (status === 1) {
                            $myinboxUl.html("");
                        }

                        for (var i = 0; i < data.data.messageList.length; i++) {
                            var datas = data.data.messageList[i];
                            var thing = thingArray[parseInt(datas.thing) - 1],
                                type = typeArray[parseInt(datas.type) - 1],
                                types = datas.type;
                            var time = new Date(datas.time).toLocaleString();

                            // 处理图片
                            var images = datas.images, imgurl = "", imgarray = new Array(), imgFlag;
                            imgFlag = images === null || images === "";
                            if (imgFlag) {
                                imgurl = '<img src="<%=path%>/images/default.png" alt="" class="mes-img">';
                            } else {
                                imgarray = images.split(";");
                                imgurl = '<img src="<%=path%>/res/img/' + imgarray[0] + '" alt="" class="mes-img">';
                            }

                            var $html = $('<li class="foundli">\n' +
                                '                    <div class="title">' + datas.title + '</div>\n' +
                                '                    <div class="message-content">\n' +
                                '                        <div class="left">\n' +
                                '                            <div class="time">时间：' + time + '</div>\n' +
                                '                            <div class="address">地点：' + datas.address + '</div>\n' +
                                '                            <div class="type">信息类型：' + type + '</div>\n' +
                                '                            <div class="thing">物品类型：' + thing + '</div>\n' +
                                '                        </div>\n' +
                                '                        <div class="right">\n' + imgurl +
                                '                        <div class="imgFlag" style="display: none;">' + imgFlag + '</div></div>\n' +
                                '                        <div class="more">展开更多</div>\n' +
                                '                        <div class="ID" style="display">' + datas.id + '</div>\n' +
                                '                    </div>\n' +
                                '                </li>');
                            if (status === 0) {
                                if (types === "2") {
                                    $put_found.append($html);
                                } else if (types === "1") {
                                    $put_lost.append($html);
                                }
                            }
                            else if (status === 1) {
                                $myinboxUl.append($html);
                            }
                        }
                        clickMore();
                        $('.right img').on("click", function () {
                            if ($(this).siblings(".imgFlag").text() === "false") {
                                var _this = $(this).clone();
                                $displayImg.html("");
                                $displayImg.append(_this);
                                $displayImg.children("img").css({
                                    width: "300px",
                                    height: "330px"
                                });
                                layer.open({
                                    type: 1,
                                    title: false,
                                    shade: 0.2,
                                    shadeClose: true,
                                    area: ['300px', '330px'],
                                    content: $displayImg,
                                    end: function () {
                                        $displayImg.html("");
                                    }
                                });
                            }
                        });
                    }
                },
                error: function (data) {
                    layer.closeAll("loading");
                    layer.msg('请检查网络', {icon: 5, time: 600});
                }
            });
        }

        /*
        * 查看更多
        * */
        function clickMore() {
            var dates = 0;
            layer.closeAll("loading");
            $('.more').click(function () {
                var id = $(this).siblings(".ID").text();
                if ((new Date() - dates) > 1500) {
                    layer.load(2);
                    dates = new Date();
                    $.ajax({
                        type: "post",
                        url: "<%=path%>/message/findDetail",
                        async: true,
                        dataType: "json",
                        data: {
                            "id": id
                        },
                        success: function (data) {
                            if (data.result === "faild") {
                                layer.closeAll("loading");
                                if (data.cause === "no login error") {
                                    layer.msg('请先登录智慧校园云平台', {icon: 5, time: 600});
                                    setTimeout(function () {
                                        // XuntongJSBridge.call('close');
                                    }, 700);
                                } else {
                                    window.location.href = "<%=path%>/error";
                                }
                            } else {
                                var datas = data.data.message;
                                var time = new Date(datas.time).toLocaleString(),
                                    status = datas.status,
                                    short = datas.linkshort,
                                    qq = datas.qq,
                                    createBy = datas.createby;
                                var thing = thingArray[parseInt(datas.thing) - 1],
                                    type = typeArray[parseInt(datas.type) - 1];
                                var shortText = "", qqText = "", context = "", flag, typetext = "", statustext = "";


                                /*处理图片*/
                                var images = datas.images, imgurl = "", imgarray = new Array();
                                if (images === null || images === "") {
                                    imgurl = '<img src="<%=path%>/images/default.png" alt="" class="mes-img">';
                                } else {
                                    imgarray = images.split(";");
                                    for (inti = 0; inti < imgarray.length; inti++) {
                                        if (imgarray[inti] !== "" && imgarray[inti] !== null && imgarray[inti].length !== 0) {
                                            imgurl += '<div><img src="<%=path%>/res/img/' + imgarray[inti] + '"></div>';
                                        }
                                    }
                                }

                                /*处理按钮*/
                                if (status === "1") {
                                    // 已处理
                                    datas.type === "1" ? statustext = "已找回" : statustext = "已招领";
                                    context = '<div class="contact" style="background:#cccccc;color:#888">' + statustext +
                                        '</div>'
                                } else {
                                    // 未处理
                                    datas.type === "1" ? typetext = "确认找回" : typetext = "确认招领";
                                    context = '<div class="contact">' + typetext + '</div>'
                                }

                                if (short != null && short !== "") {
                                    shortText = '<div class="short">短号：' + short + '</div>\n'
                                }
                                if (qq != null && qq !== "") {
                                    qqText = '<div class="qq">QQ：' + qq + '</div>\n'
                                }
                                //页面层-自定义
                                layer.closeAll('loading');
                                layer.open({
                                    type: 1,
                                    title: false,
                                    area: [width + "px", height + "px"],
                                    shadeClose: true,
                                    content: '<div class="moreshow">\n' +
                                    '    <div class="all">\n' +
                                    '        <div class="bg"></div>\n' +
                                    '        <div class="title" style="margin-left: 0px;">' + datas.title + '</div>\n' +
                                    '        <div class="message-content" style="padding: 10px;padding-bottom: 20px;text-align: center;">\n' +
                                    '            <div class="left">\n' +
                                    '                <ul>\n' +
                                    '                   <div class="layui-carousel" id="test2" lay-filter="test2" style="width:100%">\n' +
                                    '                       <div carousel-item="">\n' + imgurl +
                                    '                       </div>\n' +
                                    '                   </div>\n' +
                                    '                </ul>\n' +
                                    '                <div class="text">\n' +
                                    '                    <div class="time">时间：' + time + '</div>\n' +
                                    '                    <div class="address">地点：' + datas.address + '</div>\n' +
                                    '                    <div class="type">信息类型：' + type + '</div>\n' +
                                    '                    <div class="type">物品类型：' + thing + ' </div>\n' +
                                    '                    <div class="context">详情：' + datas.detail + '</div>\n' +
                                    '                    <div class="person">联系人：' + datas.linkman + '</div>\n' +
                                    '                    <div class="phone">电话：' + datas.linkphone + '</div>\n' +
                                    shortText + qqText +
                                    '                </div>\n' + context +
                                    '            </div>\n' +
                                    '            <div class="ID"></div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>',
                                    closeBtn: 1
                                });
                                carousel.render({
                                    elem: '#test2'
                                    , width: '100%'
                                    , arrow: 'always'
                                    , autoplay: 'false'
                                });
                                if (datas.status !== 1) {
                                    $('.contact').click(function () {
                                        layer.confirm(typetext + '吗？', {
                                            btn: ['确认', '取消'] //按钮
                                        }, function () {
                                            $.ajax({
                                                type: "post",
                                                url: "<%=path%>/message/doFinish",
                                                async: true,
                                                dataType: "json",
                                                data: {
                                                    "id": id
                                                },
                                                success: function (data) {
                                                    if (data.operate === "success") {
                                                        var texts = "";
                                                        datas.type === "1" ? texts = "已找回" : texts = "已招领";
                                                        $('.contact').text(texts);
                                                        $('.contact').css({
                                                            "color": "#888",
                                                            "background-color": "#cccccc"
                                                        });
                                                        layer.msg(texts, {icon: 1, time: 500});
                                                        setTimeout(function () {
                                                            layer.closeAll();
                                                        }, 700)
                                                    }
                                                },
                                                error: function (data) {
                                                    layer.closeAll("loading");
                                                    layer.msg('请检查网络', {icon: 5, time: 600});
                                                }
                                            });
                                        }, function () {
                                        });
                                    });
                                }
                            }
                        },
                        error: function (data) {
                            layer.closeAll("loading");
                            layer.msg('请检查网络', {icon: 5, time: 600});
                        }
                    });
                }
            });
        }
    })
</script>
</body>
</html>
